import React, { useState } from 'react';
import { ConfigProvider } from 'antd';
import { BrowserRouter as Router } from 'react-router-dom';
import { Layout, Menu, Typography } from 'antd';
import { Link } from 'react-router-dom';
import { Button } from 'antd';
import AppRoutes from './routes';
import 'antd/dist/reset.css';


const { Header, Sider, Content } = Layout;
const { Title, Text } = Typography;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);

  const toggleCollapsed = () => {
    setCollapsed(!collapsed);
  };

  return (
    <ConfigProvider>
      <Router>
        <Layout style={{ minHeight: '100vh' }}>
          <Header style={{ background: '#001529', padding: '0 20px' }}>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <Button type="text" onClick={toggleCollapsed} style={{ color: '#fff', border: 'none' }}>
                {collapsed ? '> ' : '<'}
              </Button>
              <Title level={3} style={{ margin: '0 0 0 16px', color: '#fff' }}>
                Ant Design 组件演示
              </Title>
            </div>
          </Header>
          <Layout>
            <Sider width={256} style={{ background: '#fff' }} collapsible collapsed={collapsed}>
              <Menu mode="inline" defaultSelectedKeys={['/button']}>

                <Menu.SubMenu key="general" title="通用">
                  <Menu.Item key="/button">
                    <Link to="/button">Button 按钮</Link>
                  </Menu.Item>
                  <Menu.Item key="/floating-button">
                    <Link to="/floating-button">悬浮按钮</Link>
                  </Menu.Item>
                  <Menu.Item key="/icon">
                    <Link to="/icon">Icon 图标</Link>
                  </Menu.Item>
                  <Menu.Item key="/typography">
                    <Link to="/typography">排版</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="layout" title="布局">
                  <Menu.Item key="/divider">
                    <Link to="/divider">Divider 分隔线</Link>
                  </Menu.Item>
                  <Menu.Item key="/flex">
                    <Link to="/flex">弹性布局</Link>
                  </Menu.Item>
                  <Menu.Item key="/grid">
                    <Link to="/grid">栅格</Link>
                  </Menu.Item>
                  <Menu.Item key="/layout">
                    <Link to="/layout">布局</Link>
                  </Menu.Item>
                  <Menu.Item key="/Space">
                    <Link to="/Space">间距</Link>
                  </Menu.Item>
                  <Menu.Item key="/Splitter">
                    <Link to="/Splitter">分隔面板</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="nav" title="导航">
                  <Menu.Item key="/Anchor">
                    <Link to="/Anchor">锚点</Link>
                  </Menu.Item>
                  <Menu.Item key="/Breadcrumb">
                    <Link to="/Breadcrumb">面包屑</Link>
                  </Menu.Item>
                  <Menu.Item key="/Dropdown">
                    <Link to="/Dropdown">下拉菜单</Link>
                  </Menu.Item>
                  <Menu.Item key="/Menu">
                    <Link to="/Menu">导航菜单</Link>
                  </Menu.Item>
                  <Menu.Item key="/Pagination">
                    <Link to="/Pagination">分页</Link>
                  </Menu.Item>
                  <Menu.Item key="/Steps">
                    <Link to="/Steps">步骤条</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="data-entry" title="数据录入">
                  <Menu.Item key="/AutoComplete">
                    <Link to="/AutoComplete">自动完成
                    </Link>
                  </Menu.Item>
                  <Menu.Item key="/Cascader">
                    <Link to="/Cascader">级联选择</Link>
                  </Menu.Item>
                  <Menu.Item key="/Checkbox">
                    <Link to="/Checkbox">多选框</Link>
                  </Menu.Item>
                  <Menu.Item key="/ColorPicker">
                    <Link to="/ColorPicker">颜色选择器</Link>
                  </Menu.Item>
                  <Menu.Item key="/DatePicker">
                    <Link to="/DatePicker">日期选择框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Form">
                    <Link to="/Form">表单</Link>
                  </Menu.Item>
                  <Menu.Item key="/Input">
                    <Link to="/Input">输入框</Link>
                  </Menu.Item>
                  <Menu.Item key="/InputNumber">
                    <Link to="/InputNumber">数字输入框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Mentions">
                    <Link to="/Mentions">提及</Link>
                  </Menu.Item>
                  <Menu.Item key="/Radio">
                    <Link to="/Radio">单选框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Rate">
                    <Link to="/Rate">评分</Link>
                  </Menu.Item>
                  <Menu.Item key="/Select">
                    <Link to="/Select">选择器</Link>
                  </Menu.Item>
                  <Menu.Item key="/Slider">
                    <Link to="/Slider">滑动输入条</Link>
                  </Menu.Item>
                  <Menu.Item key="/Switch">
                    <Link to="/Switch">开关</Link>
                  </Menu.Item>
                  <Menu.Item key="/TimePicker">
                    <Link to="/TimePicker">时间选择框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Transfer">
                    <Link to="/Transfer">穿梭框</Link>
                  </Menu.Item>
                  <Menu.Item key="/TreeSelect">
                    <Link to="/TreeSelect">树选择</Link>
                  </Menu.Item>
                  <Menu.Item key="/Upload">
                    <Link to="/Upload">上传</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="data-show" title="数据展示">
                  <Menu.Item key="/Avatar">
                    <Link to="/Avatar">头像</Link>
                  </Menu.Item>
                  <Menu.Item key="/Badge">
                    <Link to="/Badge">徽标叔</Link>
                  </Menu.Item>
                  <Menu.Item key="/Calendar">
                    <Link to="/Calendar">日历</Link>
                  </Menu.Item>
                  <Menu.Item key="/Card">
                    <Link to="/Card">卡片</Link>
                  </Menu.Item>
                  <Menu.Item key="/Carousel">
                    <Link to="/Carousel">走马灯</Link>
                  </Menu.Item>
                  <Menu.Item key="/Collapse">
                    <Link to="/Collapse">折叠面板</Link>
                  </Menu.Item>
                  <Menu.Item key="/Descriptions">
                    <Link to="/Descriptions">描述列表</Link>
                  </Menu.Item>
                  <Menu.Item key="/Empty">
                    <Link to="/Empty">空状态</Link>
                  </Menu.Item>
                  <Menu.Item key="/Image">
                    <Link to="/Image">图片</Link>
                  </Menu.Item>
                  <Menu.Item key="/List">
                    <Link to="/List">列表</Link>
                  </Menu.Item>
                  <Menu.Item key="/Popover">
                    <Link to="/Popover">气泡卡片</Link>
                  </Menu.Item>
                  <Menu.Item key="/QRCode">
                    <Link to="/QRCode">二维码</Link>
                  </Menu.Item>
                  <Menu.Item key="/Segmented">
                    <Link to="/Segmented">分段控制器</Link>
                  </Menu.Item>
                  <Menu.Item key="/Statistic">
                    <Link to="/Statistic">统计数值</Link>
                  </Menu.Item>
                  <Menu.Item key="/Table">
                    <Link to="/Table">表格</Link>
                  </Menu.Item>
                  <Menu.Item key="/Tabs">
                    <Link to="/Tabs">标签页</Link>
                  </Menu.Item>
                  <Menu.Item key="/Tag">
                    <Link to="/Tag">标签</Link>
                  </Menu.Item>
                  <Menu.Item key="/Timeline">
                    <Link to="/Timeline">时间轴</Link>
                  </Menu.Item>
                  <Menu.Item key="/Tooltip">
                    <Link to="/Tooltip">文字提示</Link>
                  </Menu.Item>
                  <Menu.Item key="/Tour">
                    <Link to="/Tour">漫游式引导</Link>
                  </Menu.Item>
                  <Menu.Item key="/Tree">
                    <Link to="/Tree">树形控件</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="feedback" title="反馈">
                  <Menu.Item key="/Alert">
                    <Link to="/Alert">警告</Link>
                  </Menu.Item>
                  <Menu.Item key="/Drawer">
                    <Link to="/Drawer">抽屉</Link>
                  </Menu.Item>
                  <Menu.Item key="/Message">
                    <Link to="/Message">全局提示</Link>
                  </Menu.Item>
                  <Menu.Item key="/Modal">
                    <Link to="/Modal">对话框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Notification">
                    <Link to="/Notification">通知提醒框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Popconfirm">
                    <Link to="/Popconfirm">气泡确认框</Link>
                  </Menu.Item>
                  <Menu.Item key="/Progress">
                    <Link to="/Progress">进度条</Link>
                  </Menu.Item>
                  <Menu.Item key="/Result">
                    <Link to="/Result">结果</Link>
                  </Menu.Item>
                  <Menu.Item key="/Skeleton">
                    <Link to="/Skeleton">骨架屏</Link>
                  </Menu.Item>
                  <Menu.Item key="/Spin">
                    <Link to="/Spin">加载中</Link>
                  </Menu.Item>
                  <Menu.Item key="/Watermark">
                    <Link to="/Watermark">水印</Link>
                  </Menu.Item>
                </Menu.SubMenu>

                <Menu.SubMenu key="other" title="其他">
                  <Menu.Item key="/Affix">
                    <Link to="/Affix">固钉</Link>
                  </Menu.Item>
                  <Menu.Item key="/App-button">
                    <Link to="/App-button">包裹组件</Link>
                  </Menu.Item>
                  <Menu.Item key="/ConfigProvider">
                    <Link to="/ConfigProvider">全局化配置</Link>
                  </Menu.Item>
                </Menu.SubMenu>

              </Menu>
            </Sider>
            <Content style={{ padding: '20px', background: '#f0f2f5' }}>
              <AppRoutes />
            </Content>
          </Layout>
        </Layout>
      </Router>
    </ConfigProvider>
  );
};

export default App;